<template>
  <el-dropdown @command="handleCommand">
    <span class="avatar-dropdown" :style="{ color }">
      <!--<el-avatar class="user-avatar" :src="avatar"></el-avatar>-->
      <img class="user-avatar" :src="avatar" alt="" />
      <div class="user-name">
        {{ userName }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </div>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <!-- <el-dropdown-item command="gitlab">Gitlab</el-dropdown-item> -->
        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
export default {
  name: "Avatar",
};
</script>

<script setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import { setting } from "@/config/setting";
import { useRouter } from "vue-router";
// import { useI18n } from "vue-i18n";
import { removeSess } from "@/utils/auth";
import avatar_img from "@/assets/logo.png";

const { title } = setting;
// const { t } = useI18n();
const avatar = ref(avatar_img);
const userName = ref("admin");
const router = useRouter();

defineProps({
  color: {
    type: String,
    default: "#666",
  },
});

const handleCommand = (command) => {
  switch (command) {
    case "logout":
      handleLogout();
      break;
    // case 'gitlab':
    //   window.open('http://10.0.3.250:7001/yf5/apiadmin');
    //   break;
    default:
      break;
  }
};

const handleLogout = () => {
  ElMessageBox.confirm(`您确定要退出${title}？`, "操作提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    dangerouslyUseHTMLString: true,
    type: "warning",
  })
    .then(async () => {
      removeSess("permissed");
      // await store.dispatch('user/logout');
      // if (recordRoute) {
      // const { fullPath } = router.currentRoute._value;
      // location.replace('/login');
      // } else {
      router.push("/login");
      // }
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
.avatar-dropdown {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  height: $base-avatar-dropdown-height;
  padding: $base-padding-10;
  .user-avatar {
    width: $base-avatar-widht;
    height: $base-avatar-height;
    cursor: pointer;
    border-radius: $base-border-radius-circle;
  }

  .user-name {
    position: relative;
    margin-left: $base-margin-5;
    margin-left: $base-margin-5;
    cursor: pointer;
  }
}
</style>
